<template>
    <div id="main" class="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div id="primary" class="site-comtent">
                        <article class="post-1 post format-standard" v-for="list in lists">
                            <div class="entry-thumb">
                                <img :src="list.src" class="img-responsive" alt="">
                                <div class="image-overlay"></div>
                                <a :href="list.src" data-rel="prettyPhoto" class="ima-zoom"><i class="fa fa-plus"></i></a>
                            </div>
                            <!-- /.entry-thumb -->
                            <div class="entry-wrap">

                                <header class="entry-header">
                                    <h1 class="entry-title"><a href="" rel="bookmark">{{list.title}}</a></h1>
                                </header>
                                <!-- /.entry-header -->
                                <div class="entry-content">
                                    <p>{{list.content}}</p>
                                </div>
                                <!-- /.entry-content -->
                                <div class="entry-meta">
                                    <span class="post-date"><i class="fa fa-clock-o"></i> <a href="#" title="6:17 pm">21 August, 2020</a></span>
                                    <span class="post-author"><span class="glyphicon glyphicon-user"></span> <a href="#">admin</a></span>
                                    <span class="post-cats"><i class="fa fa-th-list"></i> <a href="#">News</a></span>
                                    <span class="post-taxs"><i class="fa fa-tags"></i> <a href="#">landscape</a></span>
                                    <span class="comments-link"><i class="fa fa-comments"></i> <a href="#">17 Replies</a></span>
                                </div>
                                <!-- /.entry-meta -->
                            </div>
                            <!-- /.entry-wrap -->
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"article",
    data(){
        return{
            lists:[
                {   
                    src:"static/img/general/img1.jpg",
                    title:"Eum ne adolescens disputando",
                    content:"Nisl quidam epicuri sea ex, possit senserit cu usu. Sit et justo corpora sadipscing, in doctus delicatissimi his, an consul diceret usu. Ex mundi fabulas sed, noster timeam nominavi pri ut, alii paulo simul his no. Sonet decore dicunt has ea, tation sanctus an sea. Sensibus scribentur an ius, vis lorem pertinax forensibus et, ut vim mutat nemore moderatius. Te pri diceret pericula, id eros iudicabit quo, eos sapientem adipiscing in.Lorem ipsum dolor sit amet, te eam nisl suscipiantur. Eu eam essent eruditi mandamus. Est in ubique diceret vocibus. Utinam nostro hendrerit ne eos, id aliquid expetendis interesset usu, sed eu quas vocent. Et duo feugiat mandamus.",
                },
                
                {   
                    src:"static/img/general/img2.jpg",
                    title:"Eum ne adolescens disputando",
                    content:"Nisl quidam epicuri sea ex, possit senserit cu usu. Sit et justo corpora sadipscing, in doctus delicatissimi his, an consul diceret usu. Ex mundi fabulas sed, noster timeam nominavi pri ut, alii paulo simul his no. Sonet decore dicunt has ea, tation sanctus an sea. Sensibus scribentur an ius, vis lorem pertinax forensibus et, ut vim mutat nemore moderatius. Te pri diceret pericula, id eros iudicabit quo, eos sapientem adipiscing in.Lorem ipsum dolor sit amet, te eam nisl suscipiantur. Eu eam essent eruditi mandamus. Est in ubique diceret vocibus. Utinam nostro hendrerit ne eos, id aliquid expetendis interesset usu, sed eu quas vocent. Et duo feugiat mandamus.",
                },

                {   
                    src:"static/img/general/img3.jpg",
                    title:"Eum ne adolescens disputando",
                    content:"Nisl quidam epicuri sea ex, possit senserit cu usu. Sit et justo corpora sadipscing, in doctus delicatissimi his, an consul diceret usu. Ex mundi fabulas sed, noster timeam nominavi pri ut, alii paulo simul his no. Sonet decore dicunt has ea, tation sanctus an sea. Sensibus scribentur an ius, vis lorem pertinax forensibus et, ut vim mutat nemore moderatius. Te pri diceret pericula, id eros iudicabit quo, eos sapientem adipiscing in.Lorem ipsum dolor sit amet, te eam nisl suscipiantur. Eu eam essent eruditi mandamus. Est in ubique diceret vocibus. Utinam nostro hendrerit ne eos, id aliquid expetendis interesset usu, sed eu quas vocent. Et duo feugiat mandamus.",
                },

                {   
                    src:"static/img/general/img4.jpg",
                    title:"Eum ne adolescens disputando",
                    content:"Nisl quidam epicuri sea ex, possit senserit cu usu. Sit et justo corpora sadipscing, in doctus delicatissimi his, an consul diceret usu. Ex mundi fabulas sed, noster timeam nominavi pri ut, alii paulo simul his no. Sonet decore dicunt has ea, tation sanctus an sea. Sensibus scribentur an ius, vis lorem pertinax forensibus et, ut vim mutat nemore moderatius. Te pri diceret pericula, id eros iudicabit quo, eos sapientem adipiscing in.Lorem ipsum dolor sit amet, te eam nisl suscipiantur. Eu eam essent eruditi mandamus. Est in ubique diceret vocibus. Utinam nostro hendrerit ne eos, id aliquid expetendis interesset usu, sed eu quas vocent. Et duo feugiat mandamus.",
                }
            ]
        }
    }
}
</script>